import React, {
  Component,
  Fragment
} from 'react';

import './style-css.css';

import {
  CSSTransition
} from 'react-transition-group';

class AppCss extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: true
    }
    this.handleToogle = this.handleToogle.bind(this);
  }

  render() {
    return (
      <Fragment>
        <CSSTransition
          in = {this.state.show}
          timeout = {1000}
          classNames="my-node"
          unmountOnExit
          onEntered = {(el) => {el.style.color = 'blue'}}
          onExiting = {(el) => {el.style.color = 'red'}}
          appear = {true}
        >
          <div><h2>Hello</h2></div>  
        </CSSTransition>
        <button onClick = {this.handleToogle}>toogle</button>
      </Fragment>
    );
  }

  handleToogle() {
    this.setState(() => ({
      show: this.state.show ? false : true
    }));
  }

}

export default AppCss;